<div class="row">
  <div class="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-4">
    <h2 class="sub-header text-center">新增联系人</h2>
    <form (submit)="addContact()">
      <div class="form-group">
        <label for="name">姓名</label>
        <input
          type="text"
          class="form-control"
          id="name"
          name="name"
          placeholder="姓名"
          [(ngModel)]="formData.name"
          #name="ngModel">
        <div *ngIf="name.invalid && (name.dirty || name.touched)"
             class="alert alert-danger">
          <div *ngIf="name.errors.required">
            姓名必填
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="email">邮箱</label>
        <input
          type="email"
          class="form-control"
          id="email"
          name="email"
          placeholder="邮箱"
        [(ngModel)]="formData.email"
        #email="ngModel">
        <div *ngIf="email.invalid && (email.dirty || email.touched)"
             class="alert alert-danger">
          <div *ngIf="email.errors.required">
            邮箱必填
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="phone">电话</label>
        <input
          type="text"
          class="form-control"
          id="phone"
          name="phone"
          placeholder="电话"
          [(ngModel)]="formData.phone"
          #phone="ngModel"
        >
        <div *ngIf="phone.invalid && (phone.dirty || phone.touched)"
             class="alert alert-danger">
          <div *ngIf="phone.errors.required">
            电话必填
          </div>
        </div>
      </div>
      <button type="submit" class="btn btn-success btn-block">创建</button>
    </form>
  </div>
</div>
